<template>
  <div class="discussion">

    <h2>讨论区互动</h2>
    <el-tabs v-model="activeTab">
      <el-tab-pane label="发表的主题" name="topics">
        <el-divider></el-divider>
        <el-list>
          <el-list-item v-for="(topic, index) in topics" :key="index">
            <p class="topic-title" @click="viewTopic(topic)">{{ topic.title }}</p>
            <p class="topic-info">
              <span class="author">{{ topic.author }}</span> 发表于 {{ topic.date }} | 来自 "<span class="category">{{ topic.category }}</span>"
            </p>
          </el-list-item>
          <el-divider></el-divider>
        </el-list>
        <el-button type="primary" @click="postDialogVisible = true" style="margin-top: 20px;">发布讨论</el-button>
        <el-dialog title="发布讨论" v-model="postDialogVisible" width="30%">
          <el-form ref="postForm" :model="newTopic" label-width="80px">
            <el-form-item label="标题" required>
              <el-input v-model="newTopic.title" placeholder="请输入标题"></el-input>
            </el-form-item>
            <el-form-item label="内容" required>
              <el-input type="textarea" v-model="newTopic.content" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-form>
          <template v-slot:footer>
            <span class="dialog-footer">
              <el-button @click="postDialogVisible = false">取消</el-button>
              <el-button type="primary" @click="submitTopic">发布</el-button>
            </span>
          </template>
        </el-dialog>
      </el-tab-pane>
      <el-tab-pane label="发表的回复" name="replies">
        <el-card v-for="(reply, index) in replies" :key="index" class="reply-card">
          <p>{{ reply.content }}</p>
          <p>{{ reply.author }} 回复于 {{ reply.date }} | 来自 "{{ reply.topic }}"</p>
          <div class="actions">
            <el-button type="text" @click="editReply(reply)">编辑</el-button>
            <el-button type="text" @click="deleteReply(reply)">删除</el-button>
          </div>
        </el-card>
      </el-tab-pane>
      
    </el-tabs>

  </div>
</template>

<script>
export default {
  name: 'DiscussionBoard',
  data() {
    return {
      activeTab: 'topics', // 默认展示主题标签页
      topics: [
        {
          title: '如何平衡和调整不同属性和数值之间的关系？',
          author: '张三',
          date: '2024年4月1日',
          category: '游戏开发'
        },
        {
          title: '如何平衡和调整不同属性和数值之间的关系？',
          author: '张三',
          date: '2024年4月1日',
          category: '游戏开发'
        },
        {
          title: '如何平衡和调整不同属性和数值之间的关系？',
          author: '张三',
          date: '2024年4月1日',
          category: '游戏开发'
        },
        {
          title: '如何平衡和调整不同属性和数值之间的关系？',
          author: '张三',
          date: '2024年4月1日',
          category: '游戏开发'
        }
        // 其他主题数据按需添加
      ],
      replies: [
        // 回复数据按需添加
      ],
      comments: [
        // 评论数据按需添加
      ],
      postDialogVisible: false,
      newTopic: {
        title: '',
        content: ''
      }
    };
  },
  methods: {
    viewTopic(topic) {
      // 跳转到其他页面的逻辑，比如路由跳转
      this.$router.push({ path: '/topic-detail', query: { title: topic.title } });
    },
    submitTopic() {
      if (this.newTopic.title && this.newTopic.content) {
        const newTopic = {
          title: this.newTopic.title,
          author: '当前用户',
          date: new Date().toLocaleDateString('zh-CN'),
          category: '未分类',
          content: this.newTopic.content
        };
        this.topics.push(newTopic);
        this.postDialogVisible = false;
        this.$refs.postForm.resetFields();
        this.resetNewTopic();
      } else {
        this.$message.error('请输入标题和内容');
      }
    },
    resetNewTopic() {
      this.newTopic = {
        title: '',
        content: ''
      };
    },
    editTopic() {
      // 编辑主题逻辑
    },
    deleteTopic() {
      // 删除主题逻辑
    },
    editReply() {
      // 编辑回复逻辑
    },
    deleteReply() {
      // 删除回复逻辑
    },
    editComment() {
      // 编辑评论逻辑
    },
    deleteComment() {
      // 删除评论逻辑
    }
  }
};
</script>

<style scoped>
.discussion {
  position: absolute;
  left: 350px;
  top: 85px;
  width: 1570px;
  height: 2853px;
  opacity: 1;
  background: rgba(245, 245, 245, 1);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 20px;
}

h2 {
  color: #409EFF;
  font-size: 24px;
  margin-bottom: 20px;
}

.el-tabs {
  width: 100%;
}

.el-list-item {
  margin-bottom: 10px;
  font-size: 16px;
}

.el-divider {
  margin: 10px 0;
}

.topic-title {
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  color: #282c30;
}

.topic-title:hover {
  text-decoration: underline;
}

.topic-info {
  font-size: 14px;
  color: rgba(96, 102, 102, 0.8);
}

.author, .category {
  color: #409EFF;
}

.el-button {
  margin-top: 10px;
}
</style>